<template>
  <el-form label-width="90px" v-if="true" size="default" class="form-component-config">
    <template v-if="showPublicConfig">
      <el-form-item label="表单ID">
        <el-input size="default" disabled v-model="form.id"/>
      </el-form-item>
      <el-form-item label="表单名称">
        <el-input size="default" clearable v-model="form.title"/>
      </el-form-item>
    </template>
    <component :is="form.name" v-model="form.props"/>
    <template v-if="showPublicConfig">
      <el-form-item label="必填项">
        <el-switch v-model="form.props.required" size="default"></el-switch>
      </el-form-item>
      <el-form-item label="可打印">
        <el-switch v-model="form.props.enablePrint" size="default"></el-switch>
      </el-form-item>
    </template>
  </el-form>
  <el-empty v-else description="当前组件不支持配置"></el-empty>
</template>

<script>
import { computed } from 'vue'
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'
import TextInput from '/@/views/setting/workflow/config/TextInputConfig.vue'
import NumberInput from '/@/views/setting/workflow/config/NumberInputConfig.vue'
import AmountInput from '/@/views/setting/workflow/config/AmountInputConfig.vue'
import TextareaInput from '/@/views/setting/workflow/config/TextareaInputConfig.vue'
import MultipleSelect from '/@/views/setting/workflow/config/SelectInputConfig.vue'
import SelectInput from '/@/views/setting/workflow/config/SelectInputConfig.vue'
import TimePicker from '/@/views/setting/workflow/config/TimePickerConfig.vue'
import TimeRangePicker from '/@/views/setting/workflow/config/TimeRangePickerConfig.vue'
import DateTime from '/@/views/setting/workflow/config/DateTimeConfig.vue'
import DateTimeRange from '/@/views/setting/workflow/config/DateTimeRangeConfig.vue'
import ImageUpload from '/@/views/setting/workflow/config/ImageUploadConfig.vue'
import FileUpload from '/@/views/setting/workflow/config/FileUploadConfig.vue'
import Description from '/@/views/setting/workflow/config/DescriptionConfig.vue'
import MoneyInput from '/@/views/setting/workflow/config/MoneyInputConfig.vue'
import UserPicker from '/@/views/setting/workflow/config/UserPickerConfig.vue'
import TableList from '/@/views/setting/workflow/config/TableListConfig.vue'
import Location from '/@/views/setting/workflow/config/LocationConfig.vue'
import Provinces from '/@/views/setting/workflow/config/ProvincesConfig.vue'
import SignPanel from '/@/views/setting/workflow/config/SignPanelConfig.vue'
import ProcessIndex from '/@/views/setting/workflow/config/ProcessIndexConfig.vue'
import Score from '/@/views/setting/workflow/config/ScoreConfig.vue'
import WebIframe from '/@/views/setting/workflow/config/WebIframeConfig.vue'
import VueContainer from '/@/views/setting/workflow/config/VueContainerConfig.vue'
import CalcFormula from '/@/views/setting/workflow/config/CalcFormulaConfig.vue'
import SpanLayout from '/@/views/setting/workflow/config/SpanLayoutConfig.vue'

export default {
    name: 'FormComponentConfig',
    components: {
        TextInput,
        NumberInput,
        AmountInput,
        TextareaInput,
        MultipleSelect,
        SelectInput,
        TimePicker,
        TimeRangePicker,
        DateTime,
        DateTimeRange,
        ImageUpload,
        FileUpload,
        Description,
        MoneyInput,
        UserPicker,
        TableList,
        Location,
        Provinces,
        SignPanel,
        ProcessIndex,
        Score,
        WebIframe,
        VueContainer,
        CalcFormula,
        SpanLayout
    },
    setup() {
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const form = computed(() => {
            return workFlowConfig.selectFormItem.value
        })
        const showPublicConfig = computed(() => {
            return form.value.name !== 'SpanLayout'
        })
        return {
            form,
            showPublicConfig
        }
    }
}
</script>

<style lang="scss">
.form-component-config{
  .el-form-item:last-of-type{
    margin-bottom: 18px !important;
  }
}
</style>